<template>
	<view class="mask" :class="{flag: !flag}" @catchtouchmove="moveHandle" @touchmove.stop.prevent="moveHandle">
		
	</view>
	<view class="box" :class="{flag: !flag}">
		<view class="btnS">
			<view :style="`color:${cancel}`" @click="cancel">取消</view>
			<view :style="`color:${sureColor}`" @click="sure">确定</view>
		</view>
		<view class="box-container">
			<view class="box-container-item">
				<view v-for="item in areadata" :class="{active: item.value === address[0]}" :key="item.value" @click="selectProvince(item.value,item.label)">{{item.label}}</view>
			</view >
			<view class="box-container-item">
				<view v-show="city.length <= 0" class="box-container-item-i">请选择</view>
				<view v-show="city.length >= 1" :class="{active: item.value === address[1]}" v-for="item in city" :key="item.value" @click="selectCity(item.value,item.label)">{{item.label}}</view>
			</view>
			<view class="box-container-item">
				<view v-show="county.length <= 0" class="box-container-item-i">请选择</view>
				<view v-show="county.length >= 1" :class="{active: item.value === address[2]}" v-for="item in county" :key="item.value" @click="selectCounty(item.value,item.label)">{{item.label}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import areadata from './areadata.js'
	import {
		onShow,onUnload
	} from "@dcloudio/uni-app"
	import { defineProps,computed,ref, defineEmits,watch} from 'vue'
	let emit = defineEmits(['update:flag', 'changeAddress'])
	let props = defineProps({
		'flag': {
			default: false,
			type: Boolean
		},
		'sureColor': {
			default: '#000',
			type: String,
			validator(value) {
				if(!/^\#[0-9a-fA-F]{3,6}$/.test(value)) throw '请输入16进制'
				return true
			}
		},
		'cancel': {
			default: '#000',
			type: String,
			validator(value) {
				if(!/^\#[0-9a-fA-F]{3,6}$/.test(value)) throw '请输入16进制'
				return true
			}
		},
		'addr_code': {
			default: [],
			tyep: Array
		}
		
	})
	let city = ref([])
	let county = ref([])
	let address = ref([])
	let address_text = ref([])
	// 监听
	let stopAddr_code = watch(() => props.addr_code,() =>{ 
		selectProvince(props.addr_code[0])
		selectCity(props.addr_code[1])
		selectCounty(props.addr_code[2])
		address.value = JSON.parse(JSON.stringify(props.addr_code))
	},{immediate:true})
	//选择省
	function selectProvince(value,label) {
		address.value[0] = value 
		address.value[1] = ''
		address.value[2] = ''
		city.value.length = 0
		county.value.length = 0
		areadata.forEach(item => {
			if(item.value === value) {
				address_text.value[0] = item.label
				address_text.value[1] = ''
				address_text.value[2] = ''
				city.value = JSON.parse(JSON.stringify(item.children))
			}
		})
	}
	// 选择市
	function selectCity(value) {
		address.value[1] = value 
		address.value[2] = ''
		county.value.length = 0
		city.value.forEach(item => {
			if(item.value === value) {
				address_text.value[1] = item.label
				address_text.value[2] = ''
				county.value = JSON.parse(JSON.stringify(item.children))
			}
		})
	}
	// 选择县
	function selectCounty(value) {
		address.value[2] = value
		county.value.forEach(item => {
			if(item.value === value) {
				address_text.value[2] = item.label
			}
		})
	}
	
	//确认
	function sure() {
		if(address.value.includes('')) return
		let obj = { 
			address: address.value,
			address_text: address_text.value.join('')
		}
		emit('update:flag', false)
		emit('changeAddress', obj)
	}
	//关闭
	function cancel() {
		address.value = JSON.parse(JSON.stringify(props.addr_code))
		selectProvince(props.addr_code[0])
		selectCity(props.addr_code[1])
		selectCounty(props.addr_code[2])
		emit('update:flag', false)
	}
	function moveHandle() {
		return
	}
	onUnload(() => {
		address.value = props.addr_code
	})
</script>

<style lang="scss" scoped>
	.mask{
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 1s ease;
		&.flag{
			opacity: 0;
			z-index: -1;
			transition: 0.16s ease;
		}
	}
	.box{
		transition: 0.16s ease;
		height: 500rpx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		border-radius:10rpx;
		z-index: 99;
		margin: 15rpx;
		box-sizing: border-box;
		.btnS{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 16rpx;
			font-size: 25rpx;
		}
		
		.box-container{
			width: 100%;
			height: 200rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			justify-content: space-between;
			.box-container-item{
				flex: 1;
				text-align: center;
				overflow: scroll;
				padding: 15rpx;
				color: #ccc;
				position: relative;
				view{
					height: 60rpx;
					line-height: 60rpx;
					color: #000;
					border-radius: 15rpx;
					&.active{
						background-color: rgba(85, 255, 255, 0.5);
					}
				}
				.box-container-item-i{
					position: absolute;
					top: 50%;
					left:0;
					right:0;
					transform: rotateY(-50%);
				}
			}
		}
		&.flag{
			opacity: 0;
			z-index: -1;
		}
	}
</style>